<template>
  <CustomNav title="套餐详情"></CustomNav>
  <view class="container">
    <!-- 原生版 -->
    <!-- 轮播图 -->
    <view class="banner" v-if="detailsData.imgList?.length">
      <swiper circular autoplay interval="4000">
        <swiper-item v-for="(item, index) in detailsData.imgList" :key="index">
          <image :show-loading="true" :src="item" mode="aspectFill"></image>

          <!-- <u-image :lazy-load="true" :showLoading="true" :src="item">
            <template v-slot:loading>
              <u-loading-icon color="#ccc"></u-loading-icon>
            </template>
            <template #error>
              <view style="font-size: 24rpx">加载失败</view>
            </template>
          </u-image> -->
        </swiper-item>
      </swiper>
    </view>

    <view class="info">
      <view class="top">
        <view class="money">￥{{ detailsData.rent }}</view>
        <view class="sold">已售{{ detailsData.sale }}</view>
        <!-- <view class="sold">已售3564</view> -->
      </view>
      <view class="bottom">
        <view class="name">{{ detailsData.name }}</view>
        <view class="grade">
          <i
            class="iconfont icon-guanzhu-zhihui"
            v-for="(item, index) in 5"
            :key="index"
          ></i>
          <!-- <view class="num">{{ Number(detailsData.star).toFixed(2) }}</view> -->
          <view class="num">5.0</view>
          <!-- <view class="num">{{ Number(5).toFixed(2) }}</view> -->
        </view>
      </view>
    </view>

    <view class="details">
      <view class="row">
        <view class="title">须知</view>
        <view class="content">
          {{ detailsData.announce }}
        </view>
      </view>
      <view class="row">
        <view class="title">穿着注意事项</view>
        <view class="content">
          {{ detailsData.wearNotice }}
        </view>
      </view>
      <view class="row">
        <view class="title">归还注意事项</view>
        <view class="content">
          {{ detailsData.returnNotice }}
        </view>
      </view>
      <view class="row">
        <view class="title">店铺活动</view>
        <view class="content">
          {{ detailsData.activity }}
        </view>
      </view>
    </view>
  </view>

  <view class="schedule" @click="submitAppointment">立即预约</view>
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";
import { Alert, unAlert } from "@/utils/tool";
import { comboMealDetails } from "@/api/comboMeal";

// 路由信息
const route = getCurrentPages();

const detailsData = ref({});

onMounted(() => {
  getData();
});

const getData = async () => {
  console.log("route:", route[route.length - 1].options.id);

  const result = await comboMealDetails(route[route.length - 1].options.id);

  detailsData.value = result.data.data;

  console.log("result:", result);
};

// 立即预约
const submitAppointment = () => {
  uni.navigateTo({
    url: "/pagesA/appointment/index",
  });
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #efefef;
  min-height: 100vh;

  // 轮播图
  .banner {
    width: 100%;
    height: 500rpx;
    // margin-top: 30rpx;

    swiper {
      height: 100%;
      width: 100%;
    }

    image {
      width: 100%;
      height: 500rpx;
    }
  }

  .info {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 20rpx 30rpx;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .money {
        color: #ffb61f;
        font-size: 42rpx;
        font-weight: 800;
      }

      .sold {
        font-size: 20rpx;
      }
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;

      .name {
        color: $btn;
        font-size: 30rpx;
        font-weight: 600;
      }

      .grade {
        display: flex;
        align-items: center;

        .iconfont {
          color: #ffc650;
          margin-left: 10rpx;
        }

        .num {
          margin-left: 5rpx;
        }
      }
    }
  }

  .details {
    margin-top: 70rpx;
    padding: 0 40rpx;
    padding-bottom: 50rpx;

    .row {
      margin-top: 50rpx;

      .title {
        color: #ffb722;
        font-size: 34rpx;
        font-weight: 700;
        text-align: center;
        margin-bottom: 50rpx;
      }

      .content {
        font-size: 26rpx;
        font-weight: 600;
      }
    }
  }
}

.schedule {
  display: inline-block;
  padding: 20rpx 55rpx;
  border-radius: 50rpx;
  color: #fff;
  font-size: 28rpx;
  background-color: $btn;
  box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, 0.4);
  border: 1px solid #ee9324;
  margin-top: 70rpx;
  position: fixed;
  bottom: 100rpx;
  left: 50%;
  transform: translateX(-50%);
}
</style>
